<template>
  <div class="container">
    <div class="app-container">
      <!-- 添加角色按钮 -->
      <div>
        <el-button type="primary" size="middle" @click="onAddRole">添加角色</el-button>
      </div>
      <!-- 角色展示表单 -->
      <el-table :data="roleList" border style="margin: 20px" empty-text="暂无数据" :header-cell-style="{ backgroundColor: '#f8f9fa' }">
        <!-- 序号 -->
        <el-table-column type="index" label="序号" width="100" align="center" />
        <!-- 角色名称 -->
        <el-table-column prop="name" label="角色" width="200" align="center">
          <template #default="{ row }">
            <!-- 编辑角色时显示 -->
            <el-input v-if="row.isEdit" v-model="row.editedRow.name" />
            <!-- 角色名称，不编辑时显示 -->
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
        <!-- 启用状态 -->
        <el-table-column label="启用状态" width="200" align="center">
          <template #default="{ row }">
            <!-- 编辑角色状态，编辑角色时显示 -->
            <el-switch v-if="row.isEdit" v-model="row.editedRow.state" :active-value="1" :inactive-value="0" />
            <!-- 角色状态，不编辑时显示 -->
            <span v-else>{{ row.state ? '启用' : '禁用' }}</span>
          </template>
        </el-table-column>
        <!-- 角色描述 -->
        <el-table-column prop="description" label="描述" align="center">
          <template #default="{ row }">
            <!-- 编辑角色描述，编辑角色时显示 -->
            <el-input v-if="row.isEdit" v-model="row.editedRow.description" type="textarea" :rows="2" />
            <!-- 角色描述，不编辑时显示 -->
            <span v-else>{{ row.description }}</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center" width="250">
          <template #default="{ row }">
            <!-- 编辑角色按钮，编辑角色时显示 -->
            <div v-if="row.isEdit">
              <el-button type="primary" size="small" @click="onConfirmEditRole(row)">确认</el-button>
              <el-button size="small" @click="onCancelAditRole(row)">取消</el-button>
            </div>
            <!-- 操作角色按钮，非编辑状态时显示 -->
            <div v-else>
              <!-- 分配权限按钮 -->
              <el-button type="text" size="middle" @click="onAssignPermission(row.id)">分配权限</el-button>
              <!-- 编辑角色按钮 -->
              <el-button type="text" size="middle" @click="onEditRole(row)">编辑</el-button>
              <!-- 删除角色按钮 -->
              <el-button type="text" size="middle" @click="onDeleteRole(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination :current-page="page" background :total="total" layout="->, prev, pager, next" @current-change="onChangePage" />
      <!-- 新增角色弹框 -->
      <AddRoleDialog ref="addRoleRef" @updateRoleList="turnLastPage" />
      <!-- 分配权限弹框 -->
      <AssignPermission ref="assignPermissionRef" />
    </div>
  </div>
</template>

<script>
import { getRoleListAPI, updateRoleAPI, deleteRoleAPI } from '@/api/role'

import AddRoleDialog from './components/AddRoleDialog' // 引入新增角色弹框
import AssignPermission from './components/AssignPermission'

export default {
  name: 'Role',
  components: {
    AddRoleDialog, // 新增（编辑）角色弹框
    AssignPermission // 分配权限弹框
  },
  data() {
    return {
      roleList: [], // 角色列表
      total: 0, // 数据总条数
      page: 1, // 当前页码
      pagesize: 10 // 每页条数
    }
  },
  created() {
    // 获取角色列表
    this.getRoleList()
  },
  methods: {
    // 获取角色列表
    async getRoleList() {
      const { rows, total } = await getRoleListAPI({ page: this.page, pagesize: this.pagesize })
      this.total = total
      this.roleList = rows
      // 遍历roleList
      this.roleList.forEach(item => {
        // 为roleList中每一项添加编辑状态（isEdit）属性，以实现行内编辑功能
        this.$set(item, 'isEdit', false)
      })
    },
    // 切换页码
    onChangePage(page) {
      this.page = page
      // 获取新页的角色列表
      this.getRoleList()
    },
    // 跳转到最后一页以查看新增的角色
    turnLastPage() {
      this.total = this.total + 1
      const lastPage = Math.ceil(this.total / this.pagesize)
      this.onChangePage(lastPage)
    },
    // 点击打开新增角色弹窗
    onAddRole() {
      // 打开新增角色弹窗
      this.$refs.addRoleRef.open()
    },
    // 点击打开行内编辑角色
    onEditRole(row) {
      // 将当前角色的编辑状态（isEdit）改为true
      row.isEdit = true
      /**
       * 为要编辑的角色数据添加一个用于编辑的备份，用于编辑时显示和操作
       * 而非编辑状态时直接展示row下面的数据以实现取消行内编辑时数据回显
      */
      this.$set(row, 'editedRow', {
        id: row.id,
        name: row.name,
        state: row.state,
        description: row.description
      })
    },
    // 确认编辑角色
    async onConfirmEditRole(row) {
      // 验证角色数据
      if (!row.editedRow.name || !row.editedRow.description) {
        // 如果角色名称和角色描述都为空，则弹出提示，不进行编辑
        this.$message.warning('角色名称或角色描述不能为空')
      } else {
        // 验证通过，进行角色编辑
        // 发生请求，编辑角色
        await updateRoleAPI(row.editedRow)
        this.$message.success('编辑角色成功')
        // 将编辑后的角色信息赋值给原角色信息, 并关闭行内编辑
        Object.assign(row, { ...row.editedRow, isEdit: false })
      }
    },
    // 取消编辑角色
    onCancelAditRole(row) {
      // 关闭行内编辑
      row.isEdit = false
    },
    // 删除角色
    async onDeleteRole(id) {
      await this.$confirm('您确定要删除该角色吗？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await deleteRoleAPI(id)
      this.$message.success('删除角色成功')
      // 如果是这页的最后一条数据，且还有上一页，就跳转到上一页
      if (this.roleList.length === 1 && this.page > 1) {
        this.onChangePage(this.page - 1)
      } else {
        // 刷新列表
        this.getRoleList()
      }
    },
    // 打开分配权限弹窗
    onAssignPermission(id) {
      // 打开分配权限弹窗
      this.$refs.assignPermissionRef.open(id)
    }
  }
}
</script>

<style>
</style>
